import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
import {AbmComponent} from 'angular-baidu-maps';

declare const BMap: any;
declare const BMAP_SATELLITE_MAP: any;

@Component({
    selector: 'app-index',
    templateUrl: './index.component.html'
})
export class IndexComponent {

    options: any = {};
    status = '';
    @ViewChild('map') mapComp: AbmComponent;
    private mapSatellite: any;
    // 百度地图API功能
    private data_info = [
        [117.156151, 36.694125, '地址：北京市东城区王府井大街88号乐天银泰百货八层'],
        [117.266152, 36.614125, '地址：北京市东城区东华门大街'],
        [117.376153, 36.604125, '地址：北京市东城区正义路甲5号']
    ];
    private opts = {
        width: 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title: '信息窗口', // 信息窗口标题
        enableMessage: true// 设置允许信息窗发送短息
    };

    constructor(private el: ElementRef, private zone: NgZone) {
    }

    private _map: any;

    onReady(map: any) {
        this._map = map;
        map.centerAndZoom(new BMap.Point(117.156151, 36.694125), 11);
        map.addControl(new BMap.MapTypeControl());
        map.setCurrentCity('济南');
        map.enableScrollWheelZoom(true);
        const top_left_navigation = new BMap.NavigationControl();  // 左上角，添加默认缩放平移控件
        map.addControl(top_left_navigation);
        const geolocationControl = new BMap.GeolocationControl();
        map.addEventListener('click', this._click.bind(this));
        map.addControl(geolocationControl);

        /*   const geolocation = new BMap.Geolocation();
           geolocation.getCurrentPosition(function (r) {
               if (this.getStatus() === 0) {
                   const mk = new BMap.Marker(r.point);
                   map.addOverlay(mk);
                   map.panTo(r.point);
                   // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
               } else {
                   alert('failed' + this.getStatus());
               }
           }, {enableHighAccuracy: true});
   */

        // 随机向地图添加25个标注
        /*  const bounds = map.getBounds();
          const sw = bounds.getSouthWest();
          const ne = bounds.getNorthEast();
          const lngSpan = Math.abs(sw.lng - ne.lng);
          const latSpan = Math.abs(ne.lat - sw.lat);
          for (let i = 0; i < 25; i++) {
              const point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
              this.addMarker(point);
          }*/

        for (let i = 0; i < this.data_info.length; i++) {
            const marker = new BMap.Marker(new BMap.Point(this.data_info[i][0], this.data_info[i][1]));  // 创建标注
            const content = this.data_info[i][2];
            map.addOverlay(marker);
            // 将标注添加到地图中
            this.addClickHandler(content, marker);
        }
    }

    addClickHandler(content, marker) {
        marker.addEventListener('click', (e) => {
                this.openInfo(content, e);
            }
        );
    }

    openInfo(content, e) {
        console.log(e);
        const p = e.target;
        const point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        const infoWindow = new BMap.InfoWindow(content, this.opts);  // 创建信息窗口对象
        this._map.openInfoWindow(infoWindow, point); // 开启信息窗口
    }

    addMarker(point) {
        const marker = new BMap.Marker(point);
        this._map.addOverlay(marker);
    }

    _click(e: any) {
        this.status = `${e.point.lng}, ${e.point.lat}, ${+new Date}`;
    }

    panTo() {
        this._map.panTo(new BMap.Point(116.404, 39.715));
    }

    zoom() {
        this._map.setZoom((this._map.getZoom() + 1) % 17);
    }


    // 卫星
    onReadySatellite(map: any) {
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        map.setMapType(BMAP_SATELLITE_MAP);
        this.mapSatellite = map;
    }

    ngOnDestroy(): void {
        this._map.removeEventListener('click', this._click.bind(this));
    }
}
